<template>
	<transition name="slide-fade">
		<view class="h5-push" v-if="show" :style="dynamicStyle" @click="handleClick"
			@touchstart.stop="handleTouchStart" @touchmove.stop.prevent="handleTouchMove" @touchend.stop="handleTouchEnd">
			<view class="push-body">
				<image :src="messageImage" class="push-img" mode="aspectFill"></image>
				<view class="push-content">
					<view class="push-content-title">{{ messageTitle }}</view>
					<view class="push-content-text">{{ messageContent }}</view>
				</view>
				<view class="push-btn">查看</view>
			</view>
		</view>
	</transition>
</template>

<script>
export default {
	props: {
		// 直接通过props接收所有参数，而不是data
		inApp: { type: Boolean, default: false },
		voice: { type: Boolean, default: true },
		vibration: { type: Boolean, default: false },
		messageType: { type: String, default: '' },
		userId: { type: [String, Number], default: null },
		nickName: { type: String, default: null },
		messageTitle: { type: String, default: '新消息' },
		messageContent: { type: String, default: '您有一条新消息，请注意查收。' },
		messageImage: { type: String, default: '' },
	},
	data() {
		return {
			show: false,
			closeTimer: null,
			closeDelay: 3500,
			isDragging: false,
			initialTouch: { y: 0 },
			verticalDelta: 0,
		};
	},
	computed: {
		dynamicStyle() {
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
			const initialTop = statusBarHeight + 10; // 10px from status bar
			return `transform: translateY(${this.verticalDelta}px); top: ${initialTop}px;`;
		}
	},
	mounted() {
		// DOM挂载后显示并设置自动关闭
		this.$nextTick(() => {
			this.show = true;
			this.startCloseTimer();
		});
	},
	beforeDestroy() {
		// 组件销毁前清除定时器
		this.clearCloseTimer();
	},
	methods: {
		startCloseTimer() {
			this.clearCloseTimer();
			this.closeTimer = setTimeout(this.close, this.closeDelay);
		},
		clearCloseTimer() {
			if (this.closeTimer) {
				clearTimeout(this.closeTimer);
				this.closeTimer = null;
			}
		},
		handleClick() {
			// 如果不是拖动，则认为是点击
			if (!this.isDragging) {
				this.navigateToTarget();
				this.close();
			}
		},
		handleTouchStart(event) {
			this.clearCloseTimer(); // 开始触摸时暂停自动关闭
			this.isDragging = false;
			this.initialTouch.y = event.touches[0].clientY;
		},
		handleTouchMove(event) {
			const deltaY = event.touches[0].clientY - this.initialTouch.y;
			if (Math.abs(deltaY) > 5) {
				this.isDragging = true;
			}
			// 只允许向上滑动来关闭
			if (deltaY < 0) {
				this.verticalDelta = deltaY;
			}
		},
		handleTouchEnd(event) {
			// 如果是向上拖动超过一定阈值，则关闭
			if (this.isDragging && this.verticalDelta < -30) {
				this.close();
			} else {
				// 否则，弹回原位并重新开始计时
				this.verticalDelta = 0;
				this.startCloseTimer();
			}
			// 重置拖动状态
			setTimeout(() => { this.isDragging = false; }, 50);
		},
		navigateToTarget() {
			console.warn("准备打开通知窗口:", this.messageType);
			if (this.messageType === 'OPEN_CHAT' && this.userId) {
				const params = {
					userId: this.userId,
					nickName: this.nickName,
					avatar: this.messageImage,
					group: false,
				};
				uni.navigateTo({
					url: `/pages_sub/user/chat/chat?user=${JSON.stringify(params)}`,
					fail: (err) => console.error(`[AppPush] 打开聊天窗口失败: ${err.errMsg}`),
				});
			} else if (this.messageType === "REPLY_COMMENT") {
				uni.reLaunch({
					url: `/pages/tabBar/time-axis/time-axis`,
					fail: (err) => console.error(`[AppPush] 打开时光轴失败: ${err.errMsg}`),
				});
			} else {
				// 可以为其他类型提供一个默认的toast提示
				uni.showToast({
					title: '详情功能待实现',
					icon: 'none'
				});
			}
		},
		close() {
			this.show = false;
			// 动画结束后，从DOM中移除组件
			setTimeout(() => {
				if (this.$el && this.$el.parentNode) {
					this.$el.parentNode.removeChild(this.$el);
				}
				this.$destroy(); // 销毁Vue实例
			}, 300); // 300ms 对应CSS过渡时间
		}
	}
};
</script>

<style lang="scss" scoped>
.h5-push {
	width: 710rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 24rpx rgba(54, 58, 68, 0.12);
	border-radius: 24rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999999;
	padding: 20rpx;
	box-sizing: border-box;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;

	.push-body {
		display: flex;
		align-items: center;
	}

	.push-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
		background-color: #f2f2f3;
	}

	.push-content {
		flex: 1;
		min-width: 0; // for text-overflow to work

		.push-content-title {
			font-size: 30rpx;
			font-weight: 700;
			color: #202123;
			margin-bottom: 8rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.push-content-text {
			font-size: 26rpx;
			color: #4F555B;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.push-btn {
		background-color: #f0f0f0;
		color: #333;
		padding: 8rpx 24rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		white-space: nowrap;
	}
}

// Vue 过渡动画
.slide-fade-enter-active,
.slide-fade-leave-active {
	transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
	transform: translate(-50%, -150%);
	opacity: 0;
}
</style>